import { Container, Application } from 'pixi.js';
import { ArmatureView } from './ArmatureView';
import { AxisX } from './Axis/AxisX';
import { AxisY } from './Axis/AxisY';

class MainWindow {
    private _stage: Container;
    public armatureView!: ArmatureView;
    private _axisX!: AxisX;
    private _axisY!: AxisY;

    public constructor(app: Application) {
        this._stage = app.stage;
        this.armatureView = new ArmatureView(app);
        this.armatureView.drag({
            pressDrag: true,
            mouseButtons: "right"
        })
            .pinch({ percent: 2 })
            .wheel()
            .decelerate();
        this.armatureView.sortableChildren = true;
        // this.armatureView.position.set(500, 500);

        //this.armatureView.fit();
        //this.armatureView.moveCenter(0, 0);
        this.armatureView.moveCorner(-500, -500);

        this.addAxis();
        this._stage.addChild(this.armatureView);

        this.armatureView.on("moved", (event: any) => {
            console.log("moved", event);
            this.resetAxis();
        })
    }


    public addAxis() {
        const newPoint = this.armatureView.toScreen(0, 0);

        this._axisX = new AxisX();
        this._axisX.position.set(newPoint.x, newPoint.y);

        this._axisY = new AxisY();
        this._axisY.position.set(newPoint.x, newPoint.y);

        this._stage.addChild(this._axisX);
        this._stage.addChild(this._axisY);
    }

    public resetAxis() {
        const newPoint = this.armatureView.toScreen(0, 0);
        this._axisX.position.set(newPoint.x, newPoint.y);
        this._axisY.position.set(newPoint.x, newPoint.y);
    }
}

export {
    MainWindow
}